<template>
  <div id="category">
    <div class="container">
      <div class="timer">
        <span class="f">
          <img src="../../assets/category/timer-l.png" alt="">
          <span>{{timer}}</span>
          <img src="../../assets/category/timer-r.png" alt="">
        </span>
      </div>
      <List :items="items" />
    </div>
  </div>
</template>

<script>

import List from '../../components/category/List.vue';

export default {
  name: 'Category',
  components: {
    List
  },
  data (){
    return {
      items: [
        {"name": 'MISC', 't': 1},
        {"name": 'PWN', 't': 2},
        {"name": 'WEB', 't': 3},
        {"name": 'REVERSE', 't': 4},
      ],
      timer: "00:00:00",
    };
  },
  created() {
    let self = this;
    this.show_timer();
    setInterval(function () {
      self.show_timer();
    }, 1000);
  },
  methods: {
    show_timer() {
      let d = new Date();
      let hour = (d.getHours() < 10) ? ("0" + d.getHours()) : d.getHours();
      let min = (d.getMinutes() < 10) ? ("0" + d.getMinutes()) : d.getMinutes();
      let sec = (d.getSeconds() < 10) ? ("0" + d.getSeconds()) : d.getSeconds();
      this.timer = hour +  ":" + min + ":" + sec;
    }
  },
};
</script>

<style scoped>
#category {
  height: 100%;
}

.container {
  background-image: url("../../assets/index/background.png");
  background-position: center center;
  background-size: cover;
  position: relative;
}

.timer {
  text-align: center;
  vertical-align: middle;
  font-size: 0;
  /* padding-top: 6vw; */
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-17.5vw);
}

.timer .f {
  margin-left: -2vw;
}

.timer * {
  vertical-align: middle;
  user-select: none;
}

.timer img {
  margin-top: .5vw;
}

.timer span {
  font-size: 2.6vw;
  font-family: DINPro-Bold;
  color: #ffffff;
  text-shadow: 0 0 20px #00b9ec;
}

</style>
